<template>
  <view>
    <l-background>
      <view class="bg" />
    </l-background>
    <view class="padding-30">
      <view class="card relative">
        <view class="title flex-row flex-center" :style="{background:titleBackground(billInfo.status)}">
          <text class="text-32 color-t1">{{ year || '-' }}年{{ billInfo.name || '-' }}</text>
          <text class="text-32 margin-left-10" :style="{color:status(billInfo.status).color}">({{ status(billInfo.status).label }})</text>
        </view>

        <view class="padding-top-50 padding-bottom-30 flex-column flex-center">
          <text class="text-24 color-t3">结算金额(元)</text>
          <view class="margin-top-16">
            <text class="text-60 color-t1 text-bold">{{ billInfo.settleAmount.toFixed(2) }}</text>
          </view>
        </view>

        <tui-list-cell :hover="false">
          <view class="item flex-row align-center">
            <text class="text-28 color-t1">平台应开发票</text>
            <text class="text-28 color-t1 text-bold margin-left-40">{{ billInfo.platformAmount }}元</text>
          </view>
        </tui-list-cell>

        <tui-list-cell :hover="false" :unlined="billInfo.status===1">
          <view class="item flex-row align-center">
            <text class="text-28 color-t1">车企应开发票</text>
            <text class="text-28 color-t1 text-bold margin-left-40">{{ billInfo.couponAmount }}元</text>
          </view>
        </tui-list-cell>

        <tui-list-cell v-if="billInfo.status>2" :hover="false" unlined>
          <view>
            <text class="text-28 color-t1">结算账户</text>
            <view class="settlement-account margin-top-16">
              <data-cell v-if="billInfo.reason" margin="0" label="驳回原因" :value="billInfo.reason" />
              <data-cell label="账户名称" :value="billInfo.bankAccountName|| '-'" :margin="billInfo.reason ? '' : '0'" />
              <data-cell label="开户行" :value="billInfo.bankBranch || '-'" />
              <data-cell label="银行卡号" :value="billInfo.bankCardNumber || '-'" />
              <data-cell label="银行名称" :value="billInfo.bankName || '-'" />
              <data-cell label="凭证" value="暂无凭证" :image="billInfo.settleVoucherImgs || '-'" />
            </view>
          </view>
        </tui-list-cell>

        <view v-if="billInfo.status===1" class="button">
          <tui-button>请使用电脑端确认账单</tui-button>
        </view>

        <view class="line">
          <view class="circle left" />
          <view class="circle right" />
        </view>
      </view>
      <view v-if="billOrderList.length" class="card padding-top-30 padding-lr-30 margin-top-20">
        <text class="text-32 color-t1 text-bold">订单信息</text>
        <order-card v-for="(item,index) in billOrderList" :key="index" :item="item" type="bill" />
        <l-footer :has-more="hasMore" background-color="#ffffff" />
      </view>
    </view>
  </view>
</template>

<script>
import DataCell from '../components/data-cell/data-cell'
import colors from '@/common/colors'
import { getVehicleCompanyBillOne, searchBillOrderUserInfo } from '../api'
import { billStatus } from '../index'
export default {
  name: 'BillDetail',
  components: {
    DataCell
  },
  data() {
    return {
      billId: '',
      billInfo: {
        settleAmount: 0,
        platformAmount: 0,
        couponAmount: 0
      },
      billOrderList: [],
      year: '',
      page: 1,
      pageSize: 10,
      hasMore: true
    }
  },
  computed: {
    status() {
      return (status) => {
        for (let i = 0; i < billStatus.length; i++) {
          const item = billStatus[i]
          if (item.value === status) return item
        }
        return {
          label: '-',
          color: colors.fontcolorT3
        }
      }
    },
    titleBackground() {
      return (status) => {
        switch (status) {
          case 1:
            return 'rgba(218, 166, 101, 0.1)'
          case 2:
            return 'rgba(0, 194, 121, 0.1)'
          case 3:
            return 'rgba(255, 77, 79, 0.1)'
          default:
            return colors.colorBackground
        }
      }
    }
  },
  onLoad(e) {
    this.billId = e.id
    this.getData()
  },
  onPullDownRefresh() {
    this.reload()
  },
  onReachBottom() {
    this.nextPage()
  },
  methods: {
    getData() {
      this.getBillDetail()
      this.getBillOrder()
    },
    // 获取账单详情
    async getBillDetail() {
      const [err, res] = await getVehicleCompanyBillOne(this.billId)
      if (!this.$http.errorCheck(err, res)) return false
      this.billInfo = res.data.data
      this.year = this.billInfo.startDate.substr(0, 4)
    },
    // 获取账单订单列表
    async getBillOrder() {
      const [err, res] = await searchBillOrderUserInfo({
        billId: this.billId,
        current: this.page,
        size: this.pageSize
      })
      uni.stopPullDownRefresh()
      if (!this.$http.errorCheck(err, res)) return false
      let list = res.data.data.records
      if (!list) list = []
      if (list.length < this.pageSize) this.hasMore = false
      if (this.page === 1) this.billOrderList = list
      else this.billOrderList.push(...list)
    },
    reload() {
      this.page = 1
      this.hasMore = true
      this.getData()
    },
    nextPage() {
      if (this.hasMore) {
        this.page++
        this.getBillOrder()
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import "../index";

.card{
  border-radius:8rpx;
}
.settlement-account{
  padding:24rpx;
  background:$color-background;
  border-radius:8rpx;
}
.button{
  padding:0 120rpx 32rpx;
}
.bg{
  height: 722rpx;
  background-image: linear-gradient(to bottom, $color-secondary 50%, rgba(255, 255, 255, 0) 100%);
}
</style>
